<!DOCTYPE html>
<html>
<head>
    <title>注册 | 米塔企业微云</title>
    <meta charset="utf-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"/>
    <link href="customize/css/login.css" rel="stylesheet"/>
    <style>
        .login-content {
            height: 852px;
            background-image: url(customize/images/regist-content.png);
            top: 12%;
            padding-top: 125px;
        }

        .input-wrapper {
            margin-bottom: 16px;
        }
        /*弱提示*/
        .modal-hint{ position: fixed; top: 48%; left: 50%; background: rgba(0, 0, 0, 0.7); color: #fff; border-radius: 5px; font-size: 24px; z-index:2000; padding: 12px 20px; }
        /*强提示*/
        .modal-hint.strong{ top: 0; left: 0; border-radius: 0; font-size: 24px; z-index:2001; padding: 0; padding-top: 20%; width: 100%; height: 100%; text-align: center; }
        /*旋转动画*/
        .rotate{ animation: rotate 2s linear infinite;}
        @keyframes rotate{ 0%{ transform:rotate(0deg);} 50%{ transform:rotate(180deg);} 100%{ transform:rotate(360deg);} }
    </style>
</head>
<body>
<form class="login-content" id="registerForm">
    <div class="input-wrapper">
        <input class="login-input" type="text" name="username" id="username" placeholder="手机号"  maxlength="11">
    </div>
    <div class="input-wrapper d-flex">
        <input class="login-input" type="text" name="captcha" id="captcha" placeholder="短信验证码">
        <a class="sub-btn" href="##" style="margin-left: 21px;"
           onclick="sendMsg(this,$('#username').val(),interval)">发送验证码</a>
    </div>
    <div class="input-wrapper">
        <input class="login-input" type="text" name="displayName" id="displayName" placeholder="联系人姓名"
               autocomplete="new-password" maxlength="16">
    </div>
    <div class="input-wrapper">
        <input class="login-input" type="password" name="password" id="password" placeholder="密码"
               autocomplete="new-password">
    </div>
    <div class="input-wrapper">
        <input class="login-input" type="password" name="password2" id="password2" placeholder="确认密码"
               autocomplete="new-password">
    </div>
    <div class="input-wrapper">
        <input class="login-input" type="text" name="desc" id="desc" placeholder="备注（企业信息等）">
    </div>
    <div class="button-wrapper">
        <a class="login-btn" href="#" onclick="register()">注册</a>
    </div>
    <div class="group-wrapper font-p14" style="padding: 0 10px; text-align: right;">
        <a href="index.html">已有账号？返回登录&gt;&gt;</a>
    </div>
</form>
<script src="plugins/jquery-3.4.1.min.js"></script>
<script src="plugins/alert.js"></script>
<script src="customize/js/customModalV2.js"></script>
<script src="customize/js/CommonUtils.js"></script>
<script src="customize/js/common.js"></script>
<script>
    var interval;

    $(function () {
        itemsResize();
    });

    /* 监测窗口大小改变 */
    var resizeWaiter = false;
    $(window).resize(function () {
        if (!resizeWaiter) {
            resizeWaiter = true;
            setTimeout(function () {
                itemsResize();
                resizeWaiter = false;
            }, 500);
        }
    });

    /* 根据窗口大小缩放、调整位置 */
    function itemsResize() {
        var content_width = $('.login-content').width();
        var body_width = document.documentElement.clientWidth;//获取页面可见宽度
        var body_height = document.documentElement.clientHeight;//获取页面可见高度
        var scale = body_width / 1920;
        var oright_height = 1080 * scale;//缩放后的容器实际高度
        var offset_y = (body_height - oright_height) / 2; //背景在非全屏下的纵向偏移修正
        $('.login-content').css({
            transform: 'scale(' + scale + ')',
            transformOrigin: 'center top 0px',
            marginTop: offset_y * 0.3 //输入块在非全屏下的纵向偏移修正
        });
    }

    function register() {
        let form = $('#registerForm');
        let list = formValidator(form);
        if (list && list.length > 0) {
            let item = list.shift();
            myAlert('提示', $(item).attr('placeholder') + '不能为空');
            return;
        }
        if ($('#password').val() !== $('#password2').val()) {
            myAlert('提示', '两次密码输入不一致');
            return;
        }
        getJson('/sys/register', form.serialize(), 'POST', function (data) {
            if (data['code'] == 200) {
                myAlert('提示', '注册成功', function () {
                    top.location.href = 'index.html';
                });
            } else {
                myAlert('提示', data['message']);
            }
        });
    }
</script>
</body>
</html>
